<template>
  <div class="m-login">
    <!-- 商城登录 -->
    <div class="app-container login-tabel clearfix">
      <div class="fr m-tab">
        <div class="login-title">
          <div class="login-logo">
            <img src="../assets/logodenglu.png" alt="">
          </div>
          <span class="icon">|</span>
          <div class="title">平台管理中心</div>
        </div>
        <!-- input框 -->
        <w-form-validate @on-validate="onValidate">
          <div class="login-input-group">
            <div class="user-input">
              <span>账号</span>
              <div class="iput">
                <w-input v-model="userName" holder="请输入账号" rule="isEmpty" error="*此项必填"></w-input>
              </div>
            </div>
            <div class="user-input">
              <span>密码</span>
              <div class="iput">
                <w-input type="password" v-model="password" holder="请输入密码" rule="isEmpty|isPassword" error="*此项必填|*密码需6至20位"></w-input>
              </div>
            </div>
            <div class="clearfix">
              <div class="user-input user-code fl">
                <span>验证码</span>
                <div class="iput input-code">
                  <w-input v-model="code" holder="请输入验证码" rule="isEmpty|isCode" error="*此项必填|*为4位字母数字组合" @on-change="OnChangeVal" @focus="errorMsg = null"></w-input>
                </div>
                <div class="error-tip" v-text="errorMsg"></div>
              </div>
              <div class="login-code fr">
                <w-code @on-code="onGetCode"></w-code>
              </div>
            </div>
          </div>
          <!-- 登录 -->
          <button type="submit" class="btn btn-login">登录</button>
          <!-- 忘记密码 -->
          <div class="m-forget">
            <span class="c-main" @click="$router.push(`/findpassword`)">忘记密码？</span>
          </div>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
import GetCode from '../components/GetCode'
import { apiLogin } from 'js/api'

export default {
  data() {
    return {
      userName: '', // 账户
      password: '', // 密码
      code: '', // 图片验证码
      modalCode: '',
      errorMsg: null // 验证码错误提示
    }
  },
  methods: {
    OnChangeVal() {
      this.errorMsg = null
      if (this.code && this.code.length == 4) {
        if (this.code.toLowerCase() != this.modalCode.toLowerCase()) {
          this.errorMsg = '*验证码错误'
        }
      } else {
        this.errorMsg = null
      }
    },
    /**
     * 验证图片验证码
     */
    onGetCode(code) {
      this.modalCode = code
    },
    /**
     * 登录
     */
    onValidate() {
      // 验证码验证
      if (this.errorMsg) return
      apiLogin(this.userName, md5(this.password)).then(data => {
        if (data.code == '311') {
          this.$toast('该用户不存在!')
          return
        }
        this.$toast('登录成功!', () => {
          this.$router.push(`/`)
        })
        this.$store.commit('updateUserInfo', data.data) // 存储用户账号信息
      })
    }
  },
  components: {
    'w-code': GetCode
  }
}
</script>

<style lang="scss">
.m-login {
  .login-input-group {
    .w-input input {
      background-color: #EBEBED;
    }
    .form-control {
      border: none
    }
    .w-input .error-tip {
      margin-top: 50px;
      line-height: 0;
    }
  }
}
</style>

<style lang="scss" scoped>
.m-login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../assets/beijing.png) no-repeat;
  background-size: cover;
}
.login-tabel {
  position: absolute;
  height: 600px;
  z-index: 2;
  margin: auto;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  .m-tab {
    width: 600px;
    height: inherit;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 78px 60px;
  }
  .login-input-group {
    margin: 50px 0;
  }
  .login-title {
    height: 48px;
    margin: 0 auto;
    text-align: center;
    .login-logo {
      width:104px;
      display: inline-block;
    }
    .icon {
      margin: 0 30px;
      color: #D8D8D8;
      font-size:36px;
      vertical-align: top;
    }
    .title {
      display: inline-block;
      font-size:36px;
      vertical-align: text-bottom;
    }
  }
  .user-input {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 10px;
    padding: 0 30px;
    background-color: #EBEBED;
    font-weight: bold;
    margin-bottom: 30px;
    span {
      color: #323232;
    }
  }
  .iput {
    width: 320px;
    display: inline-block;
    margin-left: 32px;
    vertical-align: middle;
  }
  .user-code {
    width: 300px;
    display: inline-block;
    margin-bottom: 0;
    .input-code {
      width: 140px;
      margin-left: 18px;
    }
  }
  .login-code {
    display: inline-block;
    border-radius: 10px;
  }
  .btn-login {
    width: 100%;
    height: 50px;
    font-size: 14px;
  }
  .m-forget {
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
  }
  .error-tip {
    position: absolute;
    margin-top: -10px;
    color: #a94442;
    margin-left: 60px;
  }
}
</style>
